{include file="header.html"}
<script src="/js/ckeditor/ckeditor.js"></script>
<script>
    var i=0;
    $(function(){
        $('#flash').change(function(){
            i++;
            if(i%2) {
                $('#img').css('display','');
            }
            else {
                $('#img').css('display','none');
            }
        });
    });
</script>
<div class="page-header">
	<h6>
		咖啡管理
		<small>
			<i class="ace-icon fa fa-angle-double-right"></i>
			咖啡添加
		</small>
	</h6>
</div><!-- /.page-header -->
<div class="row">
<div class="col-xs-12">
	<form class="form-horizontal" role="form" method="post" action="?app=coffee&act=add" enctype="multipart/form-data">
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="name"> 咖啡 </label>
			<div class="col-sm-10">
				<input type="text" id="name" name="name" value="" class="col-xs-6" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="pic"> 主图、默认图片 </label>
			<div class="col-sm-10">
				<input type="file" id="pic" name="pic" value="" class="col-xs-6" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="price"> 普通会员价格 </label>
			<div class="col-sm-10">
				<input type="text" id="price" name="price" value="" class="col-xs-6" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="vip_price"> vip会员价格 </label>
			<div class="col-sm-10">
				<input type="text" id="vip_price" name="vip_price" value="" class="col-xs-6" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="market_price"> 市场价格 </label>
			<div class="col-sm-10">
				<input type="text" id="market_price" name="market_price" value="" class="col-xs-6" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="sort"> 排序 </label>
			<div class="col-sm-10">
				<input type="number" id="sort" name="sort" value="" class="col-xs-6" />
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="status"> 状态 </label>
			<div class="col-sm-10">
				<div class="radio">
					<label>
						<input type="radio" name="status" value="1" checked class="ace" />
						<span class="lbl"> 正常 </span>
					</label>
				</div>
				<div class="radio">
					<label>
						<input type="radio" name="status" value="0" class="ace" />
						<span class="lbl"> 隐藏 </span>
					</label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="pic"> 上传咖啡图片 </label>
			<div class="col-sm-10">
				 <div id="imgs" style="float:left;position:relative; " >
	            </div>
	            <div id="file">
	                <input id="pic_file"  type="file" name="pic_file" value="" onchange="UploadFile()"/>
	            </div>
			</div>
		</div>
<!-- 		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="sort_pic"> 图片排序 </label>
			<div class="col-sm-10">
				<input type="number" id="sort_pic" name="sort_pic" value="" class="col-xs-6" />
			</div>
		</div> -->


		<div class="clearfix form-actions">
			<div class="col-md-offset-3 col-md-9">
				<button class="btn btn-info" type="submit">
					<i class="ace-icon fa fa-check bigger-110"></i>
					提交
				</button>

				&nbsp; &nbsp; &nbsp;
				<button class="btn" type="reset">
					<i class="ace-icon fa fa-undo bigger-110"></i>
					重置
				</button>
			</div>
		</div>
	</form>
</div>
</div>
<script>
    //ajax
    var xhr;
    var now=0;
    function createXMLHttpRequest()
    {
        if(window.ActiveXObject)
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            xhr = new XMLHttpRequest();
        }
    }
    function UploadFile()
    {
        if($('#imgs').children().length>=3){
            alert("图片不可超过3张");
        }
        else{
            var fileObj = document.getElementById("pic_file").files[0];
            var FileController = '?app=coffee&act=upload_pic';
            var form = new FormData();
            form.append("pic_file", fileObj);
            createXMLHttpRequest();
            xhr.onreadystatechange = handleStateChange;
            xhr.open("post", FileController, true);
            xhr.send(form);
        }
    }

    function handleStateChange()
    {
        if(xhr.readyState == 4)
        {
            if (xhr.status == 200 || xhr.status == 0)
            {
                var result = xhr.responseText;
                document.getElementById("imgs").innerHTML+="<div id='"+now+"' style='float:left;position:relative;margin-right:10px;'>"
                        +"<img src='"+result+"' width='158' height='256' style='margin-top:10px;'>"+
                        "<input type='hidden' name='pics[]'  value='"+result+"' /><br>"+
                        "排序<input type='text' name='sort_pic[]'  value='"+999+"' /><br>"+
                        "<a href='###' style='position:absolute;right:-5.5px;top:1.5px;' onclick='onDel("+now+");'><img src='/images/horum_img_delete.png' width='20' height='20'></a></div>";
                if($('#imgs').children().length>=4){
                    $('#file').hide();//('display','hidden');
                }
                // if($('#imgs').children().length>=2){
                // 	document.getElementById("sort_pic").innerHTML+="<div id='"+div+"' style='float:left;position:relative;margin-right:10px;'>" +
                //         "<input type='number' name='sorts[]'  value='"+div+"' /><br>"+
                //         "</div>"
                // }
            }
        }
    }
    function onDel(id)
    {
        if(confirm("是否删除？")){
            var picdiv = document.getElementById(id);
            picdiv.parentNode.removeChild(picdiv);
            if($('#imgs').children().length<4){
                $('#file').show();//('display','hidden');
            }
        }else
        {
            return false;
        }
    }
</script>
{include file="footer.html"}